<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择发布类别</title>
  	<div th:include="wechat/include/exportStatic :: static"></div>
    <link rel="stylesheet" type="text/css" href="/css/publishPostType.css">
</head>
<body>
   <div class="category">
		<main>
			<div class="c-list">
				<div th:each="type : ${types}" class="c-item" th:data-item="${type.typeCode}">
					<div class="c-item-wrap">	
						<img th:src="@{${type.typePic}}">
						<span th:text="${type.typeName}"></span>
						<i class="arrow-up" th:if="${#lists.size(type.childTypes)} ne 0"></i>
					</div>
					<div th:if="${#lists.size(type.childTypes)} ne 0" class="child-list">
						<div th:each="child : ${type.childTypes}" class="child-item" 
							th:data-item="${child.typeCode}" th:text="${child.typeName}">
						</div> 
					</div>
				</div>
			</div>
		</main>
    </div>
    <script>
        // 适配
        var scale = 1 / window.devicePixelRatio
        document
            .querySelector('meta[name="viewport"]')
            .setAttribute('content', 'width=device-width,initial-scale=' + scale + ', user-scalable=no')

        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
        
        $(function(){
        	$(".c-list .c-item .c-item-wrap").click(function(){
        		var $p = $(this).parent();
        		if($p.find(".child-list").length == 0){
        			location.href="/wechat/publish/" + $p.data("item");
        		} else {
	        		$p.find("i").toggleClass("arrow-down");
	        		$p.find(".child-list").toggle();
        		}
        	});
        	$(".child-item").click(function(){
        		location.href="/wechat/publish/" + $(this).data("item");
        	})
        })
    </script>
</body>
</html>